<template>
  <el-col>
    <el-row>
      <el-table :data="activities" style="width: 100%">
        <el-table-column type="selection" width="50">
          <template #default="scope">
            <el-checkbox
                :checked="selectedIds.includes(scope.row.id)"
                @change="handleSelectionChange(scope.row.id)"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="活动名称"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="start_time" label="开始时间">
          <template #default="scope">
            {{ formatDate(scope.row.start_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="end_time" label="结束时间">
          <template #default="scope">
            {{ formatDate(scope.row.end_time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <div style="display: flex; justify-content: space-between;">
              <el-button size="small" @click="openEditDialog(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteActivity(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 编辑弹窗 -->
    <el-dialog v-model="editDialogVisible" title="编辑活动" width="400px">
      <el-form :model="editForm">
        <el-form-item label="活动名称">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="editForm.description"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
              v-model="editForm.start_time"
              type="datetime"
              placeholder="选择开始时间"
              style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
              v-model="editForm.end_time"
              type="datetime"
              placeholder="选择结束时间"
              style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </template>
    </el-dialog>
  </el-col>
</template>

<script setup>
import axios from "axios";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";

// 活动列表
const activities = ref([]);
// 选中id
const selectedIds = ref([]);
// 编辑弹窗
const editDialogVisible = ref(false);
const editForm = ref({
  id: null,
  name: "",
  description: "",
  start_time: null,
  end_time: null,
});

// 时间戳转日期字符串
function formatDate(ts) {
  if (!ts) return "";
  const date = new Date(ts);
  return date.toLocaleString();
}

// 处理后端数据为前端可用格式
function processActivities(data) {
  return Object.values(data).map(item => ({
    id: item.id,
    name: item.name,
    description: item.description,
    start_time: item.startTime,
    end_time: item.endTime,
  }));
}

// 获取活动列表
const findAllActivity = () => {
  axios.get('activity/list').then(res => {
    activities.value = processActivities(res.data);
  });
};

// 选中处理
function handleSelectionChange(id) {
  const idx = selectedIds.value.indexOf(id);
  if (idx === -1) {
    selectedIds.value.push(id);
  } else {
    selectedIds.value.splice(idx, 1);
  }
}

// 打开编辑弹窗
function openEditDialog(row) {
  editForm.value = {
    id: row.id,
    name: row.name,
    description: row.description,
    start_time: row.start_time,
    end_time: row.end_time,
  };
  editDialogVisible.value = true;
}

// 保存编辑
function saveEdit() {
  // 这里假设后端需要时间戳
  const payload = {
    id: editForm.value.id,
    name: editForm.value.name,
    description: editForm.value.description,
    startTime: new Date(editForm.value.start_time).getTime(),
    endTime: new Date(editForm.value.end_time).getTime(),
  };
  axios.post('activity/update', payload).then(res => {
    if (res.data) {
      ElMessage.success("修改成功");
      editDialogVisible.value = false;
      findAllActivity();
    } else {
      ElMessage.error("修改失败");
    }
  });
}

// 删除活动
function deleteActivity(id) {
  if (confirm("确定要删除该活动吗？")) {
    axios.post('activity/delete?id='+id).then(res => {
      if (res.data) {
        ElMessage.success("删除成功");
        findAllActivity();
      } else {
        ElMessage.error("删除失败");
      }
    });
  }
}

onMounted(() => {
  findAllActivity();
});
</script>